<template>
  <div class="pdf-process">
    <h1 class="text-2xl font-bold mb-6">PDF 处理</h1>

    <!-- 文件上传区域 -->
    <a-upload-dragger
      :multiple="true"
      :before-upload="handleBeforeUpload"
      @change="handleChange"
      accept=".pdf,.zip"
      class="mb-6"
    >
      <p class="text-lg">
        <icon-upload /> 点击或拖拽文件到此处
      </p>
      <p class="text-gray-500">
        支持单个PDF文件或多个PDF的压缩包
      </p>
    </a-upload-dragger>

    <!-- 处理选项 -->
    <div class="bg-white p-4 rounded-lg mb-6">
      <h3 class="text-lg font-medium mb-4">处理选项</h3>
      <a-form :model="formState" layout="vertical">
        <a-form-item label="处理类型">
          <a-radio-group v-model="formState.type">
            <a-radio value="merge">合并PDF</a-radio>
            <a-radio value="toExcel">转换为Excel</a-radio>
          </a-radio-group>
        </a-form-item>
        
        <a-form-item label="页面设置" v-if="formState.type === 'merge'">
          <a-checkbox v-model="formState.reserveSpace">预留装订空间</a-checkbox>
          <a-input-number
            v-model="formState.margin"
            :min="0"
            :max="50"
            addon-after="mm"
            class="ml-4"
          /> 页边距
        </a-form-item>

        <a-form-item>
          <a-button type="primary" @click="handleProcess">
            开始处理
          </a-button>
        </a-form-item>
      </a-form>
    </div>

    <!-- 处理日志 -->
    <div class="bg-white p-4 rounded-lg">
      <h3 class="text-lg font-medium mb-4">处理日志</h3>
      <a-timeline>
        <a-timeline-item
          v-for="log in logs"
          :key="log.id"
          :color="log.type"
        >
          {{ log.content }}
          <template #dot v-if="log.type === 'processing'">
            <a-spin :size="14" />
          </template>
        </a-timeline-item>
      </a-timeline>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useAppStore } from '../store'
import { IconUpload } from '@arco-design/web-vue/es/icon'
import type { Task, Log } from '@/types'

interface FormState {
  type: 'merge' | 'toExcel'
  reserveSpace: boolean
  margin: number
}

const store = useAppStore()

const formState = reactive<FormState>({
  type: 'merge',
  reserveSpace: true,
  margin: 10
})

const logs = ref<Log[]>([])

const handleBeforeUpload = (file: File) => {
  const isValidType = file.type === 'application/pdf' || 
                     file.type === 'application/zip'
  if (!isValidType) {
    logs.value.push({
      id: Date.now(),
      type: 'error',
      content: '不支持的文件类型',
      timestamp: Date.now()
    })
    return false
  }
  return true
}

interface UploadInfo {
  file: File
  fileList: File[]
}

const handleChange = (info: UploadInfo) => {
  if (info.file.status === 'done') {
    logs.value.push({
      id: Date.now(),
      type: 'success',
      content: `文件 ${info.file.name} 上传成功`,
      timestamp: Date.now()
    })
  }
}

const handleProcess = () => {
  const task: Task = {
    id: Date.now().toString(),
    type: formState.type,
    status: 'processing',
    files: [], // 添加文件列表
    options: {
      reserveSpace: formState.reserveSpace,
      margin: formState.margin
    },
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString()
  }
  
  store.addTask(task)
  logs.value.push({
    id: Date.now(),
    type: 'processing',
    content: '开始处理文件...',
    timestamp: Date.now()
  })
}
</script> 